//各界面跳转
$('footer>div').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active')
})
$('.index1').on('click', function () {
    location.href = '../pages/index.html'
})
$('.mian1').on('click', function () {
    
    location.href = '../pages/mian.html'
})
$('.cart1').on('click', function () {
    location.href = '../pages/cart.html'
})
$('.login1').on('click', function () {
    location.href = '../pages/login.html'
})

let totalNo = 0 //总页数
let productListStr = '' //所有商品列表字符
//获取商品列表数据
function getProductList(pageNo) {
    $.ajax({
        url: 'http://api.yuguoxy.com/api/shop/list',
        type: 'get',
        data: {
            pageNo,
            pageSize: 14
        },
        success: function (data) {
            if (data.resultCode == 1) {
                let list = data.resultInfo.list
                totalNo = data.resultInfo.totalNum //总页数
                loadProductList(list)
            }
        }
    })
}
/**
 * 动态渲染商品列表
 * @param {}} productList 
 */
 function loadProductList(productList) {
    let arr = productList.map(item => {
        return `<div class="item" data-index="${item.id}">
                    <img src="${item.picture}" alt="">
                    <p>${item.product}</p>
                    <p class="price">￥<span>${item.price}</span></p>
                </div>`
    })
    let str = arr.join('')
    productListStr = productListStr + str
    $('.container').html(productListStr)
}
/**
 * 加载更多
 *   页号，动态变化
 *   拼接
 */
 function onMore() {
    let pageNo = 1
    $('.more').on('click', function () {
        if (++pageNo > totalNo) {
            pageNo = totalNo
            return
        }
        getProductList(pageNo)
    })
}

$('ol>li').click(function () {
    $(this).addClass('active').siblings().removeClass('active')
})

getProductList(1)
onMore()